<!--
 * @Author: 107w 8801453+lu-shangru@user.noreply.gitee.com
 * @Date: 2023-06-12 16:21:18
 * @LastEditors: 107w 8801453+lu-shangru@user.noreply.gitee.com
 * @LastEditTime: 2023-08-23 13:50:10
 * @Description:
 *
 * Copyright (c) 2023 by 107w, All Rights Reserved.
-->
<template>
  <!-- 点击菜单想事项 -->
  <el-dropdown trigger="click">
    <!-- 显示一个图标 -->
    <div style="font-size: 48px; cursor: pointer; margin-right: 18px">
      <!-- <svg-icon icon-class="language" class="lang" /> -->
      <i class="iconfont icon-biaoqian3 lang_color" />
    </div>
    <!-- 下拉图标 -->
    <el-dropdown-menu slot="dropdown">
      <div class="nodeWrap">
        <div class="title">
          <i
            style="margin-right: 3px; color: #000"
            class="iconfont icon-biaoqian4"
          /><span>便签</span>
        </div>
        <el-divider />
      </div>
      <div class="content">
        <el-input
          v-model="stickyNote"
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 8 }"
          @blur="setStickyNote"
        />
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {
      stickyNote: '便签中的内容会存储在本地，这样即便你关掉了浏览器，在下次打开时，依然会读取到上一次的记录。是个非常小巧实用的本地备忘录。'
    }
  },
  created() {
    const stickyNote = localStorage.getItem('stickyNote')
    if (!stickyNote) return
    this.stickyNote = stickyNote
  },
  methods: {
    setStickyNote() {
      localStorage.setItem('stickyNote', this.stickyNote)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.lang_color {
  color: $navbarText;
  font-size: 21px;
  line-height: 51px;
}
.nodeWrap {
  width: 300px;
}
.title {
  display: flex;
  align-items: center;
  padding: 0 0 6px 12px;
  font-size: 14px;
  color: #595959;
}
::v-deep .content {
  .el-textarea__inner {
    border: 0 solid #ccc !important;
    transform: translate(0, 10px);
  }
}
.el-divider--horizontal {
  margin: 0 !important;
}
</style>
